<template>
  <view class="family-doctor">
    <!-- <view class="doctor-header">
      <view class="header-main">
        <view class="box-flex">
          <image src="@/static/gray.jpg" mode="aspectFill" class="header-img"></image>
          <view class="header-info">
            <view class="info-h2">琳琳 <span>美白</span></view>
            <view class="info-p">27岁 | 健康号 1005489456</view>
          </view>
          <view class="header-line"></view>
          <view class="header-handle">
            <view class="handle-item" @click="handleToUrl('/doctorPackage/member-list')">
              <image src="@/static/add-white.png" mode="aspectFill" class="img"></image>
              家庭成员
            </view>
            <view class="handle-item" @click="handleToUrl('/doctorPackage/appointment-invitation')">
              <image src="@/static/paiqi-white.png" mode="aspectFill" class="img"></image>
              预约邀请
            </view>
          </view>
        </view>
        <view class="header-footer">
          2023.01.09 首次看牙
          <view class="footer-span">查看全部档案 <uni-icons type="right" size="14" color="#fff"></uni-icons> </view>
        </view>
      </view>
    </view>
    <view class="doctor-card">
      <view class="card-title" @click="handleToUrl('/doctorPackage/archives')">
        <view class="h2">家庭医生</view>
      </view>
      <view class="box-flex">
        <view class="card-img">
          <image :src="doctorInfo.avatar || '../../static/doctor-default.png'" mode="aspectFill" class="img"></image>
          <image src="@/static/verify-icon.svg" mode="aspectFill" class="img-icon"></image>
        </view>
        <view class="card-info">
          <view class="h2">{{doctorInfo.realName}}</view>
          <view class="info-tags">
            <view class="tags-item">从业{{doctorInfo.workYear}}年</view>
          </view>
          <view class="info-p"><image src="@/static/position-gray.png" mode="aspectFill" class="img"></image> <view class="dot">{{doctorInfo.orgName}}</view></view>
        </view>
        <view class="card-handle">
          <view class="handle-item" @click="handleToUrl(`/pages/family-doctor/invitation-submit?id=${doctorInfo.id}`)">
            <image src="@/static/time-green.png" mode="aspectFill" class="img"></image>
            预约
          </view>
          <view class="handle-item">
            <image src="@/static/talk-green.png" mode="aspectFill" class="img"></image>
            咨询
          </view>
        </view>
      </view>
      <view class="card-title" @click="handleToUrl('/doctorPackage/report-list')">
        <view class="h2">Ai口腔报告</view>
        <span class="span">全部报告 <uni-icons type="right" size="14" color="#B0B0B0"></uni-icons> </span>
      </view>
      <view class="card-report">
        <view class="report-info">
          <view class="info-header">我的齿分 <span class="sub-theme" style="margin: 0 8rpx;font-weight: bold;font-size: 40rpx;">90</span> <span style="font-size: 24rpx;">分</span> <image src="@/static/Union.svg" class="img" mode="aspectFill"></image></view>
          <view class="progress">
            上传图片
            <view class="item"><uni-icons type="right" size="12" color="#B0B0B0"></uni-icons>医生诊断中</view>
          </view>
        </view>
        <view class="report-photo" @click="handleToUrl(`/doctorPackage/oral-photos?id=${reportInfo.id}`)">
          <span>请绑定口扫仪 <br />照片</span>
        </view>
      </view>
      <view class="card-warning">
        <image src="@/static/gray.jpg" mode="aspectFill" class="img"></image>
      </view>
      <view class="card-title" style="line-height: 1;margin: 16rpx 0;">
        <view class="h2">习惯养成 <uni-rate style="margin-left: 8rpx;" value="4" size="16" active-color="#df6a55"></uni-rate> </view>
        <view class="button">去刷牙</view>
      </view>
    </view>
    
    <view class="doctor-banner">
      <image src="@/static/gray.jpg" mode="aspectFill" class="img"></image>
    </view> -->
    
    <view class="doctor-goods">
      <!-- <view class="goods-title">健牙小课堂</view> -->
      <view class="goods-tabs not-bar">
        <view class="tabs-item" :class="curTabs == idx?'active':''" v-for="(item,idx) in tabsList" :key="idx" @click="handleChangeTabs(idx)">{{item.name}}</view>
      </view>
      <view class="goods-list" v-if="list.length">
        <view class="list-item" v-for="(item,idx) in list" :key="item.id" @click="handleToUrl(`/doctorPackage/news-detail?id=${item.id}`)">
          <image :src="item.coverUrl" mode="aspectFill" class="img"></image>
          <view class="item-info">
            <view class="dot2">{{item.name}}</view>
          </view>
        </view>
      </view>
      <view class="var-empty" v-else>暂无数据</view>
    </view>
  </view>
</template>

<script>
  import SinyuInvitation from '@/components/SinyuInvitation.vue'
  export default {
    components:{SinyuInvitation},
    data() {
      return {
        params:{
          page:1,
          pageSize:10
        },
        curTabs:0,
        tabsList:[],
        doctorInfo:{},
        reportInfo:{},
        showInvitation:false,
        doctorList:[],
        popupCate:[],
        selectStore:{},
        list:[]
      };
    },
    onLoad(){
      this._initData()
    },
    onShow() {
      uni.verifyLogin()
    },
    onReachBottom() {
      if(this.params.total > this.list.length){
        ++this.params.page;
        this._getArticleList()
      }
    },
    methods:{
      handleToUrl(url){
        uni.navigateTo({
          url
        })
      },
      handleChangeTabs(e){
        this.list = []
        this.curTabs = e
        this._getArticleList({
          categoryId:this.tabsList[e].id,
          page:1
        })
      },
      ////  network
      _initData(){
        this.$get('/yahe/consumerDoctor/getDoctor').then(res=>{  // 健康档案信息
          if(res.code == '1'){
            this.doctorInfo = res.content
          }
        })
        this.$get('/yahe/report/getReport').then(res=>{   /// 最近报告信息
          if(res.code == '1'){
            this.reportInfo = res.content
          }
        })
        this.$get('/news/newsCategory/listCategory',{alias:'yhxt'}).then(res=>{
          if(res.code == '1'){
            this.tabsList = [{
              id:'0',
              name:'全部'
            },...res.content]
            this._getArticleList({
              categoryId:0,
              page:1,
            })
          }
        })
        this.selectStore = uni.getStorageSync('selectStore')
        if(this.selectStore){
          this.$get('/merchant/v1/staff',{orgId:this.selectStore.id}).then(res=>{
            this.doctorList = res.content || []
          })
          this.$get(`/product/app/productReleaseAppGroup/selectProductReleaseGroup/${this.selectStore.merchantId}`).then(res=>{
            if(res.code == '1'){
              this.popupCate = res.content
              this.goodsList = []
            }
          })
        }
      },
      _getArticleList(e){  /// 小课堂列表
        const data = {
          categoryId:this.tabsList[this.curTabs].id,
          page:this.params.page,
          pageSize:this.params.pageSize,
          modularAlias:'yhxt',
          ...e
        }
        this.$get('/news/app/newsArticle/listByCategoryId',data).then(res=>{
          if(res.code == '1'){
            this.params.total = res.content.total;
            this.list = [...this.list,...res.content.records]
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.family-doctor{
  .doctor-header{
    padding: 6rpx 24rpx 0;
    background: linear-gradient(0deg, rgba(41, 216, 198, 0.23) 0%, rgba(255, 255, 255, 0) 100%);
    .header-main{
      border-radius: 24rpx 24rpx 0 0;
      background: var(--theme-color);
    }
    .box-flex{
      align-items: center;
      padding: 32rpx 24rpx 24rpx;
      .header-img{
        width: 84rpx;
        height: 84rpx;
        border-radius: 50%;
        border: 8rpx solid rgba(255,255,255,0.3);
        box-shadow: 0rpx 4rpx 14rpx 0rpx rgba(213,213,213,0.3);
      }
    }
    .header-info{
      color: #fff;
      margin-left: 20rpx;
      padding-right: 38rpx;
      .info-h2{
        font-size: 32rpx;
        font-weight: bold;
        display: flex;
        align-items: center;
        span{
          font-size: 20rpx;
          line-height: 1;
          padding: 4rpx 8rpx;
          background: rgba(255,255,255,0.34);
          margin-left: 8rpx;
        }
      }
      .info-p{
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        font-size: 22rpx;
      }
    }
    .header-line{
      width: 2rpx;
      height: 32rpx;
      background: rgba(255,255,255,0.5);
    }
    .header-handle{
      display: flex;
      align-items: center;
      margin-left: auto;
      .handle-item{
        margin-left: 32rpx;
        font-size: 18rpx;
        color: #fff;
        text-align: center;
        .img{
          width: 64rpx;
          height: 64rpx;
          display: block;
          margin: 0 auto;
        }
      }
    }
    .header-footer{
      flex-basis: 100%;
      background: #FFFFFF40;
      line-height: 72rpx;
      font-size: 22rpx;
      padding: 0 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;
    }
  }   ///  doctor-header end
  
  .doctor-card{
    padding: 0 24rpx;
    .card-title{
      line-height: 88rpx;
      display: flex;
      justify-content: space-between;
      .h2{
        font-size: 30rpx;
        color: var(--title-color);
        font-weight: bold;
        display: flex;
        align-items: center;
      }
      .span{
        color: var(--sub-title);
        font-size: 24rpx;
      }
      .button{
        line-height: 1;
        color: #fff;
        background: var(--theme-color);
        border-radius: 56rpx;
        padding: 14rpx 20rpx;
        font-size: 24rpx;
      }
    }
    .box-flex{
      align-items: center;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #efefef;
    }
    .card-img{
      margin-right: 20rpx;
      position: relative;
      width: 100rpx;
      height: 100rpx;
      .img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      .img-icon{
        width: 76rpx;
        height: 28rpx;
        border-radius: 50rpx;
        position: absolute;
        bottom: -14rpx;
        left: 50%;
        transform: translate(-50%,0);
      }
    }
    .card-info{
      flex: 1;
      margin-right: auto;
      .h2{
        font-size: 28rpx;
        color: var(--title-color);
        margin-bottom: 12rpx;
      }
      .info-tags{
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        .tags-item{
          line-height: 1;
          padding: 4rpx 8rpx;
          border-radius: 8rpx;
          color: var(--theme-color);
          border: 2rpx solid var(--theme-color);
          margin-right: 4rpx;
          font-size: 18rpx;
        }
      }
      .info-p{
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #6D6D6D;
        .img{
          width: 26rpx;
          height: 26rpx;
          margin-right: 4rpx;
        }
      }
    }
    .card-handle{
      display: flex;
      align-items: center;
      .handle-item{
        margin-left: 32rpx;
        font-size: 18rpx;
        text-align: center;
        .img{
          width: 52rpx;
          height: 52rpx;
          display: block;
          margin: 0 auto;
        }
      }
    }
    .card-report{
      display: flex;
      align-items: center;
      .report-info{
        flex: 1;
        font-size: 28rpx;
        color: var(--title-color);
        .info-header{
          display: flex;
          align-items: center;
          margin-bottom: 12rpx;
          .img{
            width: 14rpx;
            height: 21rpx;
            margin-left: 8rpx;
          }
        }
        .progress{
          display: flex;
          align-items: center;
          font-size: 20rpx;
          color: #B0B0B0;
          .item{
            display: flex;
            align-items: center;
            &.active{
              color: var(--theme-color);
            }
          }
        }
      }
      .report-photo{
        width: 218rpx;
        height: 120rpx;
        border: 2rpx dashed #B5B8B7;
        border-radius: 20rpx;
        background: #F6F6F6;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: var(--sub-title);
        margin-left: 56rpx;
        text-align: center;
        .img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .card-warning{
      margin-top: 20rpx;
      width: 100%;
      height: 130rpx;
      border-radius: 20rpx;
      overflow: hidden;
      .img{
        width: 100%;
        height: 100%;
      }
    }
  }   //   doctor-card end
  
  .doctor-banner{
    padding: 20rpx 26rpx;
    background: var(--page-bg);
    .img{
      width: 100%;
      height: 152rpx;
      border-radius: 20rpx;
    }
  }
  
  .doctor-goods{
    padding: 0 24rpx;
    background: linear-gradient( 180deg, #FFFFFF 0%, #f5f5f5 100%);
    .goods-title{
      line-height: 88rpx;
      font-size: 30rpx;
      color: var(--title-color);
      font-weight: bold;
    }
    .goods-tabs{
      margin-bottom: 24rpx;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      overflow-x: auto;
      .tabs-item{
        line-height: 1;
        font-size: 24rpx;
        padding: 14rpx 20rpx;
        background: #f6f6f6;
        color: var(--sub-title);
        border-radius: 50rpx;
        margin-right: 12rpx;
        border: 2rpx solid transparent;
        white-space: nowrap;
        &.active{
          border-color: var(--theme-color);
          color: var(--theme-color);
        }
      }
    }
    .goods-list{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .list-item{
        width: 345rpx;
        margin-bottom: 12rpx;
        border-radius: 20rpx;
        overflow: hidden;
        background: #fff;
        .img{
          width: 100%;
          height: 336rpx;
        }
        .item-info{
          padding: 20rpx 16rpx;
          font-size: 24rpx;
          color: var(--title-color);
        }
      }
    }
  }
}
</style>
